<template>
  <div class="weui-panel weui-panel_access appointwrap mycard">
    <div class="weui-panel__hd fullL">
      <span class="partB textellipsis">剩余预约时间</span>
      <time-counter class="partS" :timer="expecttime" :color="'black'" :fsize="'17px'"></time-counter>
    </div>
    <div class="weui-panel__bd weui-flex">
      <div class="weui-flex__item" @click="chgApptTime(index)" v-for="(tm, index) in times" :key="index" :class="{'selected': oSelectedTimeIndex === index}">{{tm.str}}</div>
    </div>
  </div>
</template>

<script>
import TimeCounter from '@/components/timecounter'
export default {
  name: 'OdAppoint',
  props: ['appointtimes', 'ctime', 'expect'],
  data () {
    return {
      oSelectedTimeIndex: 0
    }
  },
  computed: {
    expecttime () {
      return Math.round(Date.parse(this.ctime.replace(/-/g, '/')) / 1000) + this.expect
    },
    times () {
      let arr = []
      if (this.appointtimes.length > 0) {
        let temp = this.appointtimes[0]
        arr.push([new Date(temp.stime1.replace(/-/g, '/')), new Date(temp.etime1.replace(/-/g, '/'))])
        arr.push([new Date(temp.stime2.replace(/-/g, '/')), new Date(temp.etime2.replace(/-/g, '/'))])
        arr.push([new Date(temp.stime3.replace(/-/g, '/')), new Date(temp.etime3.replace(/-/g, '/'))])
      }

      let ret = []
      for (let i = 0; i < arr.length; i++) {
        const ele = arr[i]

        let btimestr = this.cm.dealnum(ele[0].getHours()) + ':' + this.cm.dealnum(ele[0].getMinutes())
        let etimestr = this.cm.dealnum(ele[1].getHours()) + ':' + this.cm.dealnum(ele[1].getMinutes())
        let year = ele[0].getFullYear()
        let month = ele[0].getMonth() + 1
        let day = ele[0].getDate()
        ret.push({
          str: month + '月' + day + '日\n' + btimestr + '-' + etimestr,
          date: year + '-' + month + '-' + day,
          btime: btimestr,
          etime: etimestr
        })
      }

      if (ret.length > 0) {
        localStorage.appointTime = ret[0].date + '#' + ret[0].btime + '#' + ret[0].etime
      } else {
        localStorage.appointTime = ''
      }

      return ret
    }
  },
  components: {
    TimeCounter
  },
  methods: {
    chgApptTime (i) {
      this.oSelectedTimeIndex = i
      localStorage.appointTime = this.times[i].date + '#' + this.times[i].btime + '#' + this.times[i].etime
    }
  }
}
</script>

<style lang="stylus" scoped>
.appointwrap
  /* 使分隔线的左端顶到边 */
  .weui-panel__hd:after
    left 0
  .weui-flex
    .weui-flex__item
      text-align center
      white-space pre-wrap
      padding-top 8px
      padding-bottom 5px
      line-height 24px
      color black
      &.selected
        background-color #eeeeee
        color #2F7DCD
</style>
